VS Code plėtinių kūrimo įvaldymas: išsamus vadovas pasauliniams kūrėjams

Visual Studio Code (VS Code) tapo populiariausia kodo redagavimo priemone milijonams kūrėjų visame pasaulyje. Jos populiarumas kyla iš lengvo pobūdžio, galingų funkcijų ir, svarbiausia, išplečiamumo. Galimybė kurti pasirinktinius plėtinius leidžia kūrėjams pritaikyti redaktorių prie savo specifinių poreikių, didinant produktyvumą ir supaprastinant darbo eigas. Šis išsamus vadovas padės jums sukurti savo VS Code plėtinius, nuo pradinės sąrankos iki jūsų kūrinio paskelbimo, kad juo galėtų naudotis visas pasaulis.

Kodėl verta kurti VS Code plėtinius?

VS Code plėtinių kūrimas siūlo daug privalumų tiek individualiems kūrėjams, tiek organizacijoms:

• Personalizuota darbo eiga: Pritaikykite redaktorių, kad jis puikiai atitiktų jūsų kodavimo stilių ir projekto reikalavimus.
• Padidėjęs produktyvumas: Automatizuokite pasikartojančias užduotis, integruokite su išoriniais įrankiais ir supaprastinkite kūrimo procesą.
• Patobulintas bendradarbiavimas: Dalinkitės plėtiniais su savo komanda ar platesne bendruomene, kad standartizuotumėte darbo eigas ir pagerintumėte kodo kokybę.
• Mokymasis ir įgūdžių tobulinimas: TypeScript, Node.js ir VS Code API patirtis atveria naujas karjeros galimybes.
• Indėlis į bendruomenę: Pasidalinkite savo novatoriškais sprendimais su pasauline kūrėjų bendruomene ir prisidėkite prie ekosistemos.

Būtinosios sąlygos

Prieš pradedant plėtinių kūrimą, įsitikinkite, kad turite įdiegtą:

• Node.js ir npm (Node Package Manager): VS Code plėtinių kūrimas labai priklauso nuo Node.js. Atsisiųskite ir įdiekite naujausią LTS versiją iš oficialios Node.js svetainės. npm automatiškai įdiegiamas su Node.js.
• Visual Studio Code: Įsitikinkite, kad turite įdiegtą naujausią VS Code versiją.
• Yeoman ir VS Code Extension Generator: Yeoman yra platformos įrankis, supaprastinantis plėtinių kūrimo procesą. Įdiekite jį globaliai naudodami npm:

            npm install -g yo generator-code
            

              
                Copy
              
            
          

Kūrimo aplinkos nustatymas

Kai įvykdytos būtinosios sąlygos, esate pasiruošę nustatyti savo kūrimo aplinką:

1. Sukurkite naują plėtinio projektą: Atidarykite savo terminalą ir paleiskite šią komandą, kad paleistumėte plėtinio generatorių:

            yo code
            

              
                Copy
              
            
          

2. Atsakykite į raginimus: Generatorius užduos keletą klausimų apie jūsų plėtinį. Štai dažniausiai užduodamų klausimų ir rekomenduojamų atsakymų sąrašas:
   • Kokio tipo plėtinį norite sukurti? Pasirinkite "New Extension (TypeScript)" TypeScript pagrindu sukurtam plėtiniui, kuris yra rekomenduojamas būdas.
   • Koks jūsų plėtinio pavadinimas? Pasirinkite aprašomąjį ir unikalų savo plėtinio pavadinimą. Pavyzdžiai: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
   • Koks jūsų plėtinio identifikatorius? Tai unikalus jūsų plėtinio identifikatorius, paprastai formatu `publisher.extension-name`. Pasirinkite leidėjo pavadinimą (pvz., savo GitHub vartotojo vardą arba įmonės pavadinimą).
   • Koks jūsų plėtinio aprašymas? Pateikite glaustą ir informatyvų aprašymą, ką daro jūsų plėtinys.
   • Inicializuoti git saugyklą? Pasirinkite "Yes", kad inicializuotumėte Git saugyklą versijų valdymui.
   • Ar norite naudoti eslint kodo tikrinimui? Pasirinkite "Yes", kad užtikrintumėte kodo stiliaus nuoseklumą.
3. Atidarykite projektą VS Code: Kai generatorius baigs darbą, atidarykite naujai sukurtą projekto aplanką VS Code.

Projekto struktūros supratimas

Plėtinių generatorius sukuria pagrindinę projekto struktūrą su šiais pagrindiniais failais:

• `package.json`: Šiame faile yra metaduomenys apie jūsų plėtinį, įskaitant jo pavadinimą, versiją, aprašymą, priklausomybes ir aktyvavimo įvykius.
• `tsconfig.json`: Šis failas konfigūruoja TypeScript kompiliatorių.
• `.vscode/launch.json`: Šis failas konfigūruoja derintuvą jūsų plėtiniui.
• `src/extension.ts`: Tai pagrindinis jūsų plėtinio įvesties taškas. Jame yra `activate` ir `deactivate` funkcijos.
• `README.md`: Markdown failas, kuriame pateikiamas jūsų plėtinio aprašymas, kaip juo naudotis ir bet kokia svarbi informacija.

Pirmojo plėtinio rašymas

Pradėkime nuo paprasto plėtinio, kuris rodo "Hello World" pranešimą, kai vykdoma komanda:

1. Atidarykite `src/extension.ts`: Šiame faile yra `activate` funkcija, kuri iškviečiama, kai jūsų plėtinys yra aktyvuojamas.
2. Modifikuokite `activate` funkciją: Pakeiskite esamą kodą šiuo:

            import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension \"my-extension\" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
            

              
                Copy
              
            
          

3. Paaiškinimas:
   • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registruoja komandą su ID `my-extension.helloWorld`. Ši komanda bus prieinama VS Code komandų paletėje.
   • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Rodo informacinį pranešimą VS Code lange.
   • `context.subscriptions.push(disposable)`: Prideda komandą prie plėtinio prenumeratų, užtikrinant, kad ji būtų tinkamai pašalinta, kai plėtinys yra deaktyvuojamas.
4. Modifikuokite `package.json`: Pridėkite šį kodą prie `contributes` skilties, kad apibrėžtumėte komandą:

            "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
            

              
                Copy
              
            
          

5. Paaiškinimas:
   • `"commands"`: Apibrėžia komandas, kurias prisideda jūsų plėtinys.
   • `"command": "my-extension.helloWorld"`: Nurodo komandos ID, kuris atitinka ID, naudojamą `extension.ts`.
   • `"title": "Hello World"`: Nustato komandos rodomą pavadinimą komandų paletėje.

Plėtinio testavimas

Dabar atėjo laikas išbandyti savo plėtinį:

1. Paspauskite F5: Tai paleis naują VS Code langą su įdiegtu jūsų plėtiniu. Tai yra "Extension Development Host".
2. Atidarykite komandų paletę: Paspauskite `Ctrl+Shift+P` (arba `Cmd+Shift+P` macOS), kad atidarytumėte komandų paletę.
3. Įveskite "Hello World": Turėtumėte pamatyti savo komandą, nurodytą komandų paletėje.
4. Pasirinkite "Hello World": Spustelėjus komandą ji bus įvykdyta ir VS Code lange bus rodomas pranešimas "Hello World".

Plėtinio derinimas

Derinimas yra labai svarbus norint nustatyti ir ištaisyti problemas plėtiniuose. VS Code suteikia puikų derinimo palaikymą:

1. Nustatykite lūžio taškus: Spustelėkite redaktoriaus paraštėje šalia eilučių numerių, kad nustatytumėte lūžio taškus savo kode.
2. Paspauskite F5: Tai paleis Extension Development Host derinimo režimu.
3. Suaktyvinkite savo plėtinį: Įvykdykite komandą arba veiksmą, kuris suaktyvina kodą, kurį norite derinti.
4. Patikrinkite kintamuosius ir iškvietimo dėklą: VS Code derintuvas sustabdys vykdymą ties jūsų lūžio taškais, leisdamas jums patikrinti kintamuosius, žingsniuoti per kodą ir ištirti iškvietimo dėklą.

Darbas su VS Code API

VS Code API suteikia turtingą sąsajų ir funkcijų rinkinį, skirtą sąveikai su redaktoriumi. Štai kelios pagrindinės API sritys:

• `vscode.window`: Skirta sąveikai su VS Code langu, pranešimų rodymui, įvesties laukų rodymui ir skydelių valdymui.
• `vscode.workspace`: Skirta prieigai prie darbo srities ir jos manipuliavimui, įskaitant failus, aplankus ir konfigūracijos nustatymus.
• `vscode.commands`: Skirta komandų registravimui ir vykdymui.
• `vscode.languages`: Skirta kalbos palaikymui, pvz., sintaksės paryškinimui, kodo užbaigimui ir diagnostikai.
• `vscode.debug`: Skirta sąveikai su derintuvu.
• `vscode.scm`: Skirta sąveikai su šaltinio kodo valdymo sistemomis, tokiomis kaip Git.

Pavyzdys: kodo fragmento plėtinio kūrimas

Sukurkime plėtinį, kuris prideda kodo fragmentą, skirtą sukurti pagrindinį React komponentą:

1. Sukurkite `snippets` aplanką: Sukurkite naują aplanką pavadinimu `snippets` savo projekto šakniniame kataloge.
2. Sukurkite fragmento failą: Sukurkite failą pavadinimu `react.json` aplanke `snippets`.
3. Pridėkite fragmento apibrėžimą: Pridėkite šį JSON į `react.json`:

            {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
\n\t\t\t${2:Content}\n\t\t
\n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
            

              
                Copy
              
            
          

4. Paaiškinimas:
   • `"React Component"`: Fragmento pavadinimas.
   • `"prefix": "reactcomp"`: Prefiksas, kuris suaktyvina fragmentą. Įvedus `reactcomp` ir paspaudus `Tab`, bus įterptas fragmentas.
   • `"body"`: Eilučių masyvas, vaizduojantis kodo eilutes fragmente.
   • `${1:ComponentName}`: Tabuliavimo sustojimas, leidžiantis greitai pakeisti komponento pavadinimą.
   • `"description"`: Fragmento aprašymas.
5. Modifikuokite `package.json`: Pridėkite šį kodą prie `contributes` skilties:

            "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
            

              
                Copy
              
            
          

6. Paaiškinimas:
   • `"snippets"`: Apibrėžia fragmentus, kuriuos prisideda jūsų plėtinys.
   • `"language": "javascriptreact"`: Nurodo kalbą, kuriai fragmentas yra taikomas.
   • `"path": "./snippets/react.json"`: Nurodo kelią į fragmento failą.
7. Išbandykite savo fragmentą: Atidarykite `.jsx` arba `.tsx` failą ir įveskite `reactcomp`. Paspauskite `Tab`, kad įterptumėte fragmentą.

Pažangios plėtinių kūrimo technikos

Kai įvaldysite pagrindus, galite ištirti pažangesnes plėtinių kūrimo technikas:

• Language Server Protocol (LSP): Naudokite LSP, kad suteiktumėte pažangų kalbos palaikymą, pvz., kodo užbaigimą, diagnostiką ir refaktoringą, konkrečiai kalbai. Populiarios LSP implementacijos apima Python, Java ir Go.
• Debugging Adapters: Sukurkite pasirinktinius derinimo adapterius, kad palaikytumėte konkrečių programavimo kalbų ar vykdymo aplinkų derinimą.
• Webviews: Įterpkite interaktyvias žiniatinklio sąsajas į VS Code naudodami webviews. Tai leidžia jums kurti sudėtingus ir vizualiai patrauklius plėtinius.
• Theming: Sukurkite pasirinktines temas, kad pakeistumėte VS Code išvaizdą. Daugelis populiarių temų yra prieinamos VS Code Marketplace.
• Keybindings: Apibrėžkite pasirinktinius klavišų susiejimus, kad susietumėte konkrečius veiksmus su klaviatūros nuorodomis.

Internacionalizacija ir lokalizacija (i18n ir L10n)

Norėdami pasiekti pasaulinę auditoriją, apsvarstykite galimybę internacionalizuoti ir lokalizuoti savo plėtinį. Tai apima jūsų plėtinio pritaikymą, kad palaikytų skirtingas kalbas ir regionus.

• Išorinius tekstus: Perkelti visus vartotojui matomus tekstus į atskirus išteklių failus.
• Naudokite VS Code i18n API: VS Code pateikia API, skirtą lokalizuotų tekstų įkėlimui pagal vartotojo lokalę.
• Palaikykite kelias kalbas: Pateikite išteklių failus skirtingoms kalboms.
• Apsvarstykite tekstą iš dešinės į kairę (RTL): Jei jūsų plėtinys rodo tekstą, įsitikinkite, kad jis palaiko RTL kalbas, tokias kaip arabų ir hebrajų.

Plėtinio publikavimas

Kai jūsų plėtinys bus paruoštas, galite jį paskelbti VS Code Marketplace, kad kiti galėtų juo naudotis:

1. Sukurkite Azure DevOps organizaciją: Norėdami paskelbti savo plėtinį, jums reikės Azure DevOps organizacijos. Jei neturite, sukurkite nemokamą paskyrą Azure DevOps svetainėje.
2. Įdiekite `vsce` įrankį: VS Code Extension Manager (`vsce`) yra komandų eilutės įrankis, skirtas plėtinių pakavimui ir publikavimui. Įdiekite jį globaliai naudodami npm:

            npm install -g vsce
            

              
                Copy
              
            
          

3. Sukurkite leidėją: Leidėjas yra tapatybė, kuriai priklauso jūsų plėtiniai Marketplace. Sukurkite leidėją naudodami `vsce create-publisher` komandą. Jums reikės pateikti leidėjo pavadinimą ir asmeninio prieigos rakto (PAT) iš Azure DevOps.
4. Sugeneruokite asmeninį prieigos raktą (PAT): Azure DevOps eikite į "User Settings" -> "Personal Access Tokens" ir sukurkite naują PAT su "Marketplace (Publish)" aprėptimi.
5. Supakuokite savo plėtinį: Naudokite `vsce package` komandą, kad supakuotumėte savo plėtinį į `.vsix` failą.
6. Paskelbkite savo plėtinį: Naudokite `vsce publish` komandą, kad paskelbtumėte savo plėtinį Marketplace. Jums reikės pateikti savo leidėjo pavadinimą ir savo PAT.

Geriausia plėtinių kūrimo praktika

Vadovaukitės šiomis geriausiomis praktikomis, kad sukurtumėte aukštos kokybės ir prižiūrimus VS Code plėtinius:

• Naudokite TypeScript: TypeScript suteikia statinį tipavimą ir pagerina kodo prižiūrimumą.
• Rašykite vienetinius testus: Rašykite vienetinius testus, kad užtikrintumėte, jog jūsų plėtinys veikia teisingai.
• Naudokite Linterį: Naudokite linterį, pvz., ESLint, kad užtikrintumėte kodo stiliaus nuoseklumą.
• Dokumentuokite savo kodą: Parašykite aiškią ir glaustą dokumentaciją savo plėtiniui.
• Tvarkykite klaidas grakščiai: Įdiekite tinkamą klaidų tvarkymą, kad jūsų plėtinys neatsijungtų.
• Optimizuokite našumą: Optimizuokite savo plėtinio našumą, kad išvengtumėte VS Code sulėtėjimo.
• Laikykitės VS Code API gairių: Laikykitės VS Code API gairių, kad užtikrintumėte, jog jūsų plėtinys gerai integruojasi su redaktoriumi.
• Atsižvelkite į prieinamumą: Padarykite savo plėtinį prieinamą naudotojams su negalia.

Bendruomenės ištekliai

Štai keletas vertingų išteklių, kuriuose galite sužinoti daugiau apie VS Code plėtinių kūrimą:

• VS Code Extension API dokumentacija: Oficiali VS Code Extension API dokumentacija.
• VS Code Extension pavyzdžiai: Plėtinių pavyzdžių rinkinys, demonstruojantis įvairias API funkcijas.
• VS Code Marketplace: Naršykite VS Code Marketplace, kad rastumėte esamus plėtinius ir pasimokytumėte iš jų kodo.
• Stack Overflow: Užduokite klausimus ir raskite atsakymus, susijusius su VS Code plėtinių kūrimu.
• GitHub: Naršykite atvirojo kodo VS Code plėtinius ir prisidėkite prie bendruomenės.

Išvada

VS Code plėtinių kūrimas yra galingas būdas pritaikyti savo kodavimo aplinką, padidinti produktyvumą ir pasidalinti savo sprendimais su pasauline kūrėjų bendruomene. Vadovaudamiesi šiuo išsamiu vadovu, galite įvaldyti plėtinių kūrimo meną ir sukurti novatoriškus įrankius, kurie pagerins VS Code patirtį jums ir kitiems. Nepamirškite priimti bendruomenę, prisidėti prie atvirojo kodo projektų ir nuolat mokytis bei tyrinėti nuolat besikeičiantį VS Code plėtinių kūrimo pasaulį. Sėkmės ir laimingo kodavimo!